/*
 * @Author: 张笑天
 * @Date: 2018-03-07 17:08:40
 * @Last Modified by: lyuan2018
 * @Last Modified time: 2020-08-20 15:28:46
 */
import React from 'react';
import { Menu } from 'antd';
import classNames from 'classnames';
import { WeaDropdown, WeaTag, WeaNewScroll } from 'ecCom';

const MenuItem = Menu.Item;
const pcl = 'wea-email-dropdown';

export default class DropdownMenu extends React.Component {
  static displayName = 'DropdownMenu';
  componentDidMount() {
    this.isInstanceMounted = true;
  }
  componentWillReceiveProps() {}
  componentWillUnmount() {
    this.isInstanceMounted = false;
  }
  hide = () => {
    this.refs.dropdown &&
      this.refs.dropdown.refs.dropdown.refs.rcdropdown.refs.trigger.close();
  };
  scrollToTop = () => {
    this.refs.scroll && this.refs.scroll.scrollerToTop();
  };
  onItemClick = (key, item) => {
    const { onClick } = this.props;
    if (typeof onClick === 'function') {
      !item.props
        ? onClick(key, item)
        : ['SETUP', 'TAG'].indexOf(item.props.data.type) < 0 &&
          onClick(key, item.props.data);
    }
    this.hide();
  };
  getBtn = (data, hasClick) => {
    const {
      key,
      icon = '',
      type,
      label,
      rows: { length = 0 },
    } = data;
    return type === 'NORMAL' ? (
      label
    ) : length === 0 ? (
      <i
        title={label}
        className={icon || 'icon-email-Unread-o'}
        onClick={() => {
          hasClick ? this.onItemClick(key, data) : '';
        }}
      />
    ) : (
      <span title={label}>
        <i className={icon || 'icon-email-Unread-o'} />
        <i className="icon-coms-organization-down" />
      </span>
    );
  };
  render() {
    const { data, prefixClass, type = '' } = this.props;
    return (
      <span className={`${pcl}-btn ${prefixClass}-btn`}>
        {data.rows.length === 0 ? (
          this.getBtn(data, true)
        ) : (
          <WeaDropdown
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaDropdown@lt0oyp`}
            overlayClassName={pcl}
            ref="dropdown"
            type={type}
            onVisibleChange={v => v && this.scrollToTop()}
            overlay={
              <div style={{ maxHeight: 260, width: 150 }}>
                <WeaNewScroll
                  ecId={`${
                    (this && this.props && this.props.ecId) || ''
                  }_WeaNewScroll@puvq9h`}
                  ref="scroll"
                >
                  <Menu
                    ecId={`${
                      (this && this.props && this.props.ecId) || ''
                    }_Menu@1s0xdn`}
                    className={`${pcl}-menu ${prefixClass}-menu`}
                    prefixCls="ant-dropdown-menu"
                    onClick={({ key, item }) => this.onItemClick(key, item)}
                  >
                    {data.rows.map(d => (
                      <MenuItem
                        ecId={`${
                          (this && this.props && this.props.ecId) || ''
                        }_MenuItem@zliyie@${d.key}`}
                        key={d.key}
                        data={d}
                        className={classNames({
                          [`${pcl}-menu-item`]: true,
                          [`${pcl}-menu-item-line`]: d.hasLine,
                        })}
                      >
                        {d.type === 'SETUP' ? (
                          <div style={{ width: '100%' }}>
                            {d.label}
                            <i
                              className="icon-email-Set-up"
                              style={{ fontSize: 16, float: 'right' }}
                              onClick={() => this.onItemClick(d.key, d)}
                            />
                          </div>
                        ) : d.type === 'TAG' ? (
                          <WeaTag
                            ecId={`${
                              (this && this.props && this.props.ecId) || ''
                            }_WeaTag@d156a8@${d.key}`}
                            color={d.tagColor}
                            onClick={() => this.onItemClick(d.key, d)}
                          >
                            <div className="text-elli" title={d.tagName}>
                              {d.tagName}
                            </div>
                          </WeaTag>
                        ) : (
                          <div className="text-elli" title={d.label}>
                            {d.label}
                          </div>
                        )}
                      </MenuItem>
                    ))}
                  </Menu>
                </WeaNewScroll>
              </div>
            }
          >
            {this.getBtn(data)}
          </WeaDropdown>
        )}
      </span>
    );
  }
}
// export default ({ data, prefixClass, onClick, type = '' }) => (
//   <span className={`${pcl}-btn ${prefixClass}-btn`}>
//   { data.rows.length === 0
//     ? getBtn(data, onClick)
//     : <WeaDropdown
//       overlayClassName={pcl}
//       type={type}
//       overlay= {
//         <WeaNewScroll height={(data.rows.length > 8 ? 8 : data.rows.length) * 31.6
//             + data.rows.filter(d => d.hasLine).length
//           }
//         >
//           <Menu className={`${pcl}-menu ${prefixClass}-menu`}
//             prefixCls='ant-dropdown-menu'
//             onClick={({ key, item }) => clk(key, item, onClick)}
//           >
//             {
//               data.rows.map(d => (
//                 <MenuItem key={d.key}
//                   data={d}
//                   className={classNames({
//                     [`${pcl}-menu-item`]: true,
//                     [`${pcl}-menu-item-line`]: d.hasLine,
//                   })
//                   }
//                 >
//                   {
//                     d.type === 'SETUP'
//                     ? <div style={{ width: '100%' }}>
//                         {d.label}
//                         <i className='icon-email-Set-up' style={{ fontSize: 16, float: 'right' }}
//                           onClick={() => clk(d.key, d, onClick)}
//                         />
//                       </div>
//                     : d.type === 'TAG'
//                     ? <WeaTag
//                       style={{ color: '#fff', background: d.tagColor }}
//                       onClick={() => clk(d.key, d, onClick)}
//                     >
//                       {d.tagName}
//                     </WeaTag>
//                     : d.label
//                   }
//                 </MenuItem>
//               ))
//             }
//           </Menu>
//         </WeaNewScroll>
//       }
//     >
//       {getBtn(data)}
//     </WeaDropdown>
//     }
//   </span>
// );
